<template>
<!-- v-if="Object.keys(goods).length !== 0" 判断传过来的数据是不是一个空的对象 -->
  <div id="baseInfo" v-if="Object.keys(goods).length !== 0">
        <p class="info-title">{{goods.title}}</p>
        <div class="info-price">
           <span class="n-price">{{goods.newPrice}}</span>
           <span class="o-price">{{goods.oldPrice}}</span>
           <span class="discount" v-if="goods.discount">{{goods.discount}}</span>
        </div>
        <div class="info-other">
            <span>{{goods.columns[0]}}</span>
            <span>{{goods.columns[1]}}</span>
            <span><img :src="goods.services[goods.services.length-1].icon" alt="">{{goods.services[goods.services.length-1].name}}</span>
        </div>
        <div class="info-service">
            <div class="info-service-item" v-for="index in goods.services.length-1" :key="index">
               <img :src="goods.services[index-1].icon"/>
               <span>{{goods.services[index-1].name}}</span>
            </div>
        </div>
  </div>
</template>
<script>
export default {
  name: 'Detailbaseinfo',
  components: {  },
  directives: {  },
  props:{
    goods:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  data() {
    return {
      
    };
  },
  mounted() {
    
  },
  methods: {
    
  },
 }
</script>

<style scoped>
.info-title{
  width:100%;
  padding:0 10px;
  margin:5px auto;
  font-size:18px;
  color:#46423d;
  text-align: justify;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.info-price {
  font-size:15px;
  color:rgb(68, 60, 60);
  text-align: left;
  line-height: 20px;
  padding:0 10px;
}
.info-price  span{
  display: inline-block;
  vertical-align: top;
  margin:0 5px;
}
.info-price  span.n-price{
  font-size:20px;
  margin-top: 5px;
  color:#e84e69;
}
.info-price  span.o-price{
  color:#ccc;
  margin-top: 5px;
  text-decoration:line-through;
}
.info-price  span.discount{
   background: rgb(241, 175, 36);
   border-radius: 10px;
   padding:5px;
}
.info-other {
  margin:10px auto;
  height:20px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  padding:0 10px;
}
.info-other  span{
  display:block;
  font-size:18px;
  color: #ccc;
  line-height: 20px;
}
.info-other img{
  display: inline-block;
  vertical-align: top;
  width:20px;
  height: 20px;
  margin:0 5px;
}
.info-service{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin:10px auto;
  padding:0 10px;
}
.info-service-item{
  flex: 1;
  text-align: center;
  font-size:0 ;
}
.info-service-item img{
  width:15px;
  height:15px;
  display: inline-block;
  vertical-align: top;
  margin:2px;
}
.info-service-item span{
  display: inline-block;
  vertical-align: top;
  font-size: 12px;
  color: #ccc;
}
</style>